<template>
    <div>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="header">
                    <img src="@/assets/login_logo.png">
                    <p class="welcome">欢迎登录</p>
                </div>
            </el-header>
            <!-- 中间 -->
            <el-main>
                <div class="main">
                    <!-- 登录窗 -->
                    <el-card class="box-card">
                        <div class="card_header">
                            <span>账户登录</span>
                        </div>
                        <div class="card_main">
                            <el-input prefix-icon="el-icon-s-custom" v-model="username" @blur="verifyName" placeholder="请输入账号"></el-input>
                            <!-- 提示 -->
                            <div class="hint">{{hint1}}</div>
                            <el-input prefix-icon="el-icon-lock" @blur="verifyPsw" v-model="password" placeholder="请输入密码"></el-input>
                            <!-- 提示 -->
                            <div class="hint">{{hint2}}</div>
                            <p>忘记密码</p>
                        </div>
                        <el-button type="primary" @click="userLogin">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
                        <div class="card_footer"><a @click="goRegister"><i class="el-icon-d-arrow-right"></i> 立即注册</a></div>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'Login',
    props: {

    },
    data() {
        return {
            username:'',
            password:'',
            hint1:'', //提示1
            hint2:'' //提示2
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        //路由跳转去注册页面
        goRegister(){
            this.$router.push('/register');
        },
        //验证账号
        verifyName(){
            // const regex = /^[0-9a-zA-Z]{6,18}$/ //6-18位字母数字组合
            // this.hint1 = regex.test(this.username)? '':'账号格式输入有误'
        },
        //验证密码
        verifyPsw(){
            // const regex = /^[A-Za-z0-9]{6,8}$/; // 6-18位密码
            // this.hint2 = regex.test(this.password)? '':'密码格式输入有误'
        },
        userLogin(){
          this.$API.userLogin({
                username: this.username,
                password: this.password
              }).then(res =>{
                if(res.code == "200"){
                  //
                  localStorage.setItem("user",JSON.stringify(res.data)) 
                  if(res.data.roleId ==1){
                    this.$router.push('/front/Home')
                  }else {
                    this.$router.push('/front/Home')
                  }
                }
          })
      }
    },
    components: {

    },
};
</script>

<style scoped lang="less">

//页面头部logo
.header {
    display: flex;
    justify-content: left;
    height: 60px;
    width: 990px;
    margin: 0 auto;
    margin-top: 15px;

    .welcome {
        font-size: 25px;
        line-height: 73px;
        margin-left: 30px;
    }
}

//中间背景图
.el-main {
    height: 475px;
    background-image: url('@/assets/background.png');
    background-repeat: no-repeat;
    background-color: #E93854;
    background-position: center;
    margin-top: 50px;

    .main {
        width: 990px;
        margin: 0 auto;
        display: flex;
        justify-content: right;

        .el-input:first-child {
            margin-top: 30px;
        }

        .el-input:nth-child(2) {
            margin-top: 20px;
        }

        p {
            cursor: pointer;
            margin-top: 10px;
            font-size: 10px;
            color: #666;
            text-align: right;
        }
    }

//登录卡片
    .box-card {
        width: 346px;
        height: 400px;
        
        .card_header {
            text-align: center;
            height: 55px;
            font-size: 25px;
            font-weight: bolder;
            line-height: 55px;
            color: #E93854;
        }
        .card_main{
            //输错提示
            .hint{
                height: 25px;
                color: #E4393C;
                font-size: 13px;
                line-height: 20px;
            }
        }
        .el-button {
            background-color: #E4393C;
            outline: none;
            border: none;
            height: 33px;
            line-height: 8px;
            margin-top: 20px;
            font-size: 20px;
            width: 100%;
            color: white;
        }

        .card_footer {
            padding: 0;
            height: 50px;
            font-size: 15px;
            line-height: 50px;
            margin-top: 20px;
            text-align: right;
            color: #E4393C;
            margin-bottom: 0;
            a{
                cursor: pointer;
            }
        }
    }

}
</style>
